<template>
	<view class="container">
		<view class="tui-order-header" @tap="switchStatus">
			<!-- <image :src="webURL+'img_detail_bg.png'" mode="widthFix" class="tui-img-bg"></image> -->
			<view class="tui-header-content">
				<view>
					<view class="tui-status-text">{{ getStatusText(detail.orderState) }}</view>
					<view class="tui-reason">
						<!-- <text class="tui-reason-text">{{ getReason(status) }}</text> -->
						<!-- 		<tui-countdown
							:time="1800"
							color="rgba(254,254,254,0.75)"
							colonColor="rgba(254,254,254,0.75)"
							borderColor="transparent"
							backgroundColor="transparent"
							v-if="status === 1"
						></tui-countdown> -->
					</view>
				</view>
				<image :src="getImg(status)" class="tui-status-img" mode="widthFix"></image>
			</view>
		</view>
		<tui-list-cell v-if="detail.userExpressVo && detail.userExpressVo.expressState == 'y'" backgroundColor="#fefefe">
			<view class="tui-flex-box">
				<image :src="webURL + 'img_order_logistics3x.png'" class="tui-icon-img"></image>
				<view class="tui-logistics">
					<view class="tui-logistics-text">快递公司：{{ detail.userExpressVo.expressName }}</view>
					<view class="tui-logistics-time">快递单号：{{ detail.userExpressVo.expressCode }}</view>
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell v-if="detail.userExpressVo && detail.userExpressVo.province" unlined :hover="false">
			<view class="tui-flex-box">
				<image :src="webURL + 'img_order_address3x.png'" class="tui-icon-img"></image>
				<view class="tui-addr">
					<view class="tui-addr-userinfo">
						{{ detail.userExpressVo.realName || '' }}
						<text class="tui-addr-tel">{{ detail.userExpressVo.mobilePhone || '' }}</text>
					</view>
					<view class="tui-addr-text">
						{{ detail.userExpressVo.province + detail.userExpressVo.city + (detail.userExpressVo.district || '') + detail.userExpressVo.addressDetail }}
					</view>
				</view>
			</view>
		</tui-list-cell>

		<view class="tui-order-item">
			<tui-list-cell :hover="false" :lineLeft="false"><view class="tui-goods-title">商品信息</view></tui-list-cell>
			<block v-for="(item, index) in detail.productOrderItemVos" :key="index">
				<tui-list-cell @click="handleDetail(item)" padding="0">
					<view class="tui-goods-item">
						<image :src="item.productCoverUrl" class="tui-goods-img"></image>
						<view class="tui-goods-center">
							<view class="tui-goods-name">{{ item.productName }}</view>
							<view class="tui-goods-attr">{{ item.productSkuName }}</view>
						</view>
						<view class="tui-price-right">
							<view v-if="detail.payType == 'integral'">{{ item.itemAmount }}积分</view>
							<view v-else>￥{{ item.itemAmount }}</view>
							<view>x{{ item.productSkuNum }}</view>
						</view>
					</view>
				</tui-list-cell>
			</block>
			<view class="tui-goods-info">
				<!-- 	<view class="tui-price-flex tui-size24">
					<view>商品总额</view>
					<view>￥1192.00</view>
				</view> -->
				<view v-if="detail.productOrderDiscountVo && detail.productOrderDiscountVo.specialOfferAmount" class="tui-price-flex  tui-size24">
					<view>限时优惠</view>
					<view>￥{{ (detail.productOrderDiscountVo && detail.productOrderDiscountVo.specialOfferAmount) || 0 }}</view>
				</view>
				<view v-if="detail.useBalance" class="tui-price-flex  tui-size24">
					<view>使用余额</view>
					<view>￥{{ detail.useBalance || 0 }}</view>
				</view>
				<view v-if="detail.productOrderDiscountVo && detail.productOrderDiscountVo.integralAmount" class="tui-price-flex  tui-size24">
					<view>积分抵扣</view>
					<view>￥{{ (detail.productOrderDiscountVo && detail.productOrderDiscountVo.integralAmount) || 0 }}</view>
				</view>
				<view v-if="detail.productOrderDiscountVo && detail.productOrderDiscountVo.deductionAmount" class="tui-price-flex  tui-size24">
					<view>使用折扣金</view>
					<view>￥{{ (detail.productOrderDiscountVo && detail.productOrderDiscountVo.deductionAmount) || 0 }}</view>
				</view>
				<view v-if="detail.productOrderDiscountVo && detail.productOrderDiscountVo.shareAmount" class="tui-price-flex  tui-size24">
					<view>使用分红金</view>
					<view>￥{{ (detail.productOrderDiscountVo && detail.productOrderDiscountVo.shareAmount) || 0 }}</view>
				</view>

				<!-- 	<view class="tui-price-flex  tui-size24">
					<view>配送费</view>
					<view>￥0.00</view>
				</view> -->

				<view v-if="detail.payType == 'integral'" class="tui-price-flex tui-size32 tui-pbtm20">
					<view class="tui-flex-shrink">合计积分</view>
					<view class="tui-goods-price">
						<view class="tui-size-24"></view>
						<view class="tui-price-large">{{ detail.integralNum }}</view>
						<view class="tui-size-24"></view>
					</view>
				</view>
				<view v-else class="tui-price-flex tui-size32 tui-pbtm20">
					<view class="tui-flex-shrink">合计</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ detail.orderAmount }}</view>
						<view class="tui-size-24"></view>
					</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">实付款</view>
					<view class="tui-goods-price tui-primary-color">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ detail.orderRealAmount }}</view>
						<!-- <view class="tui-size-24">.00</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="tui-order-info">
			<tui-list-cell :hover="false"><view class="tui-order-title">订单信息</view></tui-list-cell>
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单类型:</view>
					<view class="tui-item-content">{{ detail.typeName }}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">订单号:</view>
					<view class="tui-item-content">{{ detail.id }}</view>
				</view>
				<view v-if="detail.confirmReceiptTime" class="tui-order-flex">
					<view class="tui-item-title">收货时间:</view>
					<view class="tui-item-content">{{ detail.confirmReceiptTime }}</view>
				</view>
				<view v-if="detail.createdTime" class="tui-order-flex">
					<view class="tui-item-title">创建时间:</view>
					<view class="tui-item-content">{{ detail.createdTime }}</view>
				</view>
				<view v-if="detail.orderPayTime" class="tui-order-flex">
					<view class="tui-item-title">付款时间:</view>
					<view class="tui-item-content">{{ detail.orderPayTime }}</view>
				</view>
				<view v-if="detail.deliveryTime" class="tui-order-flex">
					<view class="tui-item-title">发货时间:</view>
					<view class="tui-item-content">{{ detail.deliveryTime }}</view>
				</view>
				<!-- 		<view class="tui-order-flex">
					<view class="tui-item-title">配送方式:</view>
					<view class="tui-item-content">包邮</view>
				</view> -->
				<view class="tui-order-flex">
					<view class="tui-item-title">订单备注:</view>
					<view class="tui-item-content">{{ detail.orderMemo }}</view>
				</view>
			</view>
		</view>
		<view class="tui-safe-area"></view>
		<view v-if="detail.orderState !== 'waitSend' && detail.orderState !== 'finished'" class="tui-tabbar tui-order-btn">
			<!-- 		<view v-if="detail.orderState == 'cancel'" class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle">删除订单</tui-button>
			</view> -->
			<view v-if="detail.orderState == 'waitPay'" class="tui-btn-mr">
				<tui-button @click="modelShow = true" type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle">取消订单</tui-button>
			</view>
			<view v-if="detail.orderState == 'waitPay'" class="tui-btn-mr">
				<tui-button type="primary" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="btnPay">立即支付</tui-button>
			</view>
			<view @click="handleAsk" v-if="detail.orderState == 'waitAsk'" class="tui-btn-mr">
				<tui-button type="primary" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle">确认收货</tui-button>
			</view>
		</view>
		<t-pay-way :id="detail.id" :payMoney="detail.orderRealAmount" :show="show" @close="popupClose"></t-pay-way>
		<tui-modal :show="modelShow" @cancel="modelShow = false" :custom="true" fadeIn>
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">备注</view>
				<input placeholder="请输入备注" class="tui-modal-input" :class="{ 'tui-hidden-input': !cancelMemo }" v-model="cancelMemo" />
				<tui-button height="72rpx" :size="28" shape="circle" @click="handleCancelOrder">确认</tui-button>
			</view>
		</tui-modal>
	</view>
</template>

<script>
import { orderDetail, confirmReceipt, cancelOrder } from '@/service/order.js';
import tPayWay from '@/components/views/t-pay-way/ti-pay-way';
export default {
	components: {
		tPayWay
	},
	data() {
		return {
			webURL: 'https://www.thorui.cn/wx/static/images/mall/order/',
			//1-待付款 2-付款成功 3-待收货 4-订单已完成 5-交易关闭
			status: 1,
			modelShow: false,
			show: false,
			cancelMemo: '',
			detail: {
				userExpressVo: {},
				productOrderItemVos: [],
				productOrderDiscountVo: {}
			}
		};
	},
	onLoad({ id }) {
		if (id) {
			this.id = id;
			this.getDetail();
		}
	},
	methods: {
		async handleDetail({ productId }) {
			uni.navigateTo(
				{
					url: '../productDetail/index'
				},
				{
					type: '',
					id: productId
				}
			);
		},
		async handleAsk() {
			try {
				uni.showLoading();
				await confirmReceipt({ orderId: this.detail.id });
				this.getDetail();
			} finally {
				uni.hideLoading();
				//TODO handle the exception
			}
		},
		async handleCancelOrder() {
			try {
				uni.showLoading();
				await cancelOrder({ orderId: this.detail.id, cancelMemo: this.cancelMemo });
				this.modelShow = false;
				this.getDetail();
			} finally {
				uni.hideLoading();
				//TODO handle the exception
			}
		},

		async getDetail() {
			this.detail = await orderDetail({ orderId: this.id }, { loading: true });
			let typeMap = {
				integral: '积分产品',
				daily: '特价产品',
				vip: '会员产品'
			};
			this.detail.typeName = typeMap[this.detail.payType] || '普通产品';
		},
		getImg: function(status) {
			return this.webURL + ['img_order_payment3x.png', 'img_order_send3x.png', 'img_order_received3x.png', 'img_order_signed3x.png', 'img_order_closed3x.png'][status - 1];
		},
		getStatusText: function(status) {
			const typeMap = {
				waitPay: '等待您付款',
				waitSend: '待发货',
				waitAsk: '待收货',
				cancel: '订单已取消',
				finished: '订单已完成'
			};
			return status ? typeMap[status] : '';
		},
		getReason: function(status) {
			return ['剩余时间', '等待卖家发货', '还剩X天XX小时自动确认', '', '超时未付款，订单自动取消'][status - 1];
		},
		switchStatus() {
			let status = this.status + 1;
			this.status = status > 5 ? 1 : status;
			this.tui.toast('状态切换成功');
		},
		logistics() {
			this.tui.href('/pages/extend/timeaxis/timeaxis?page=mall');
		},
		btnPay() {
			this.show = true;
		},
		popupClose() {
			this.show = false;
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	padding-bottom: 118rpx;
}

.tui-order-header {
	width: 100%;
	height: 160rpx;
	position: relative;
	background: $gradient-bg;
}

.tui-img-bg {
	width: 100%;
	height: 160rpx;
}

.tui-header-content {
	width: 100%;
	height: 160rpx;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 70rpx;
	box-sizing: border-box;
}

.tui-status-text {
	font-size: 34rpx;
	line-height: 34rpx;
	color: #fefefe;
}

.tui-reason {
	font-size: 24rpx;
	line-height: 24rpx;
	color: rgba(254, 254, 254, 0.75);
	padding-top: 15rpx;
	display: flex;
	align-items: center;
}

.tui-reason-text {
	padding-right: 12rpx;
}

.tui-status-img {
	width: 80rpx;
	height: 80rpx;
	display: block;
}

.tui-flex-box {
	width: 100%;
	display: flex;
	align-items: center;
}

.tui-icon-img {
	width: 44rpx;
	height: 44rpx;
	flex-shrink: 0;
}

.tui-logistics {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 24rpx 0 20rpx;
	box-sizing: border-box;
}

.tui-logistics-text {
	font-size: 26rpx;
	line-height: 32rpx;
}

.tui-logistics-time {
	font-size: 24rpx;
	line-height: 24rpx;
	padding-top: 16rpx;
	color: #666;
}

.tui-addr {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 20rpx;
	box-sizing: border-box;
}

.tui-addr-userinfo {
	font-size: 30rpx;
	line-height: 30rpx;
	font-weight: bold;
}

.tui-addr-text {
	font-size: 24rpx;
	line-height: 32rpx;
	padding-top: 16rpx;
}

.tui-addr-tel {
	padding-left: 40rpx;
}

.tui-order-item {
	margin-top: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.tui-goods-title {
	width: 100%;
	font-size: 32rpx;
	line-height: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-goods-item {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.tui-goods-img {
	width: 180rpx;
	height: 180rpx;
	display: block;
	flex-shrink: 0;
}

.tui-goods-center {
	flex: 1;
	padding: 20rpx 8rpx;
	box-sizing: border-box;
}

.tui-goods-name {
	max-width: 310rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 26rpx;
	line-height: 32rpx;
}

.tui-goods-attr {
	font-size: 22rpx;
	color: #888888;
	line-height: 32rpx;
	padding-top: 20rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-price-right {
	text-align: right;
	font-size: 24rpx;
	color: #888888;
	line-height: 30rpx;
	padding-top: 20rpx;
}

.tui-color-red {
	color: #e41f19;
	padding-right: 30rpx;
}

.tui-goods-price {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	font-size: 24rpx;
}

.tui-size-24 {
	font-size: 24rpx;
	line-height: 24rpx;
}

.tui-price-large {
	font-size: 32rpx;
	line-height: 30rpx;
}

.tui-goods-info {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	background: #fff;
}

.tui-price-flex {
	display: flex;
	font-size: 28rpx;
	align-items: center;
	justify-content: space-between;
}

.tui-size24 {
	padding-bottom: 20rpx;
	font-size: 28rpx;
	line-height: 24rpx;
	color: #888;
}

.tui-size32 {
	font-size: 32rpx;
	line-height: 32rpx;
	font-weight: 500;
}

.tui-pbtm20 {
	padding-bottom: 20rpx;
}

.tui-flex-shrink {
	flex-shrink: 0;
}

.tui-primary-color {
	color: #eb0909;
}

.tui-order-info {
	margin-top: 20rpx;
}

.tui-order-title {
	position: relative;
	font-size: 32rpx;
	line-height: 28rpx;
	padding-left: 12rpx;
	box-sizing: border-box;
}

.tui-order-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	border-left: 4rpx solid #eb0909;
	height: 100%;
}

.tui-order-content {
	width: 100%;
	padding: 24rpx 30rpx;
	box-sizing: border-box;
	background: #fff;
	font-size: 24rpx;
	line-height: 30rpx;
}

.tui-order-flex {
	display: flex;
	padding-top: 18rpx;
}

.tui-order-flex:first-child {
	padding-top: 0;
}

.tui-item-title {
	width: 140rpx;
	font-size: 28upx;
	flex-shrink: 0;
}

.tui-item-content {
	color: #666;
	font-size: 28upx;
	line-height: 32rpx;
}

.tui-safe-area {
	height: 1rpx;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-tabbar {
	width: 100%;
	height: 98rpx;
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 26rpx;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 996;
}

.tui-btn-mr {
	margin-right: 30rpx;
}

.tui-modal-custom {
	text-align: center;
}

.tui-tips-img {
	width: 80rpx;
	height: 80rpx;
	margin-top: 20rpx;
}

.tui-modal-custom-text {
	font-size: 30rpx;
	color: #333;
	padding: 30rpx 0 50rpx;
}

.tui-prompt-title {
	padding-bottom: 20rpx;
	font-size: 34rpx;
}
.tui-modal-input {
	width: 80%;
	border-bottom: 1rpx solid #e6e6e6;
	margin: 30rpx auto 50rpx;
	padding-bottom: 20rpx;
	font-size: 32rpx;
}
.tui-hidden-input {
	/* #ifdef MP-WEIXIN */
	width: 0;
	/* #endif */
}
</style>
